<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item v-if="isMuilUnitUser">
          <el-select filterable @change="getData(1)" v-model="formInline.orgIds" placeholder="请选择业主单位">
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input 
          v-model.trim="formInline.name" 
          placeholder="请输入点位名称"
          @keyup.enter.native="getData(1)"
          clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button v-if="!isMuilUnitUser" type="primary" @click="addPoint(1)">新增</el-button>
      </div>
    </el-row>
    <el-row class="overview-wrap" :gutter="40">
      <span style="display:none;">{{freashStaticFlag}}</span>
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-8">{{ staticObj.inspectOrgCount }}</p>
          <p class="item-title">单位总数</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-3">{{ staticObj.pointCount }}</p>
          <p class="item-title">点位总数</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap">
          <p class="item-value color-4">{{ staticObj.aveOrgCount }}</p>
          <p class="item-title">单位平均点位数</p>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%">
      <el-table-column
      label="序号"
      type="index"
      width="50">
      </el-table-column>
      <el-table-column
      v-if="isMuilUnitUser"
      prop="orgName"
      label="业主单位">
      </el-table-column>
      <el-table-column prop="picUrl" label="图片" width="100" >
        <!-- 图片的显示 -->
        <template  slot-scope="scope">            
          <img :src="scope.row.picUrl?scope.row.picUrl.split(',')[0]:defaultImg"  width="50" height="50" @click="$imgPreview" :data-imgpreview="scope.row.picUrl"/>
        </template>         
      </el-table-column>
      <el-table-column
        label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
      prop="name"
      label="点位名称">
      </el-table-column>
      <el-table-column
      prop="pointTypeName"
      label="所属类别">
      </el-table-column>
      <el-table-column
      prop="fbsName"
      label="所属建筑物">
      </el-table-column>
      <el-table-column
      prop="address"
      label="具体地址">
      </el-table-column>
      <el-table-column label="二维码" prop="visualCode" width="100">
        <template slot-scope="scope">
          <el-popover
            placement="top"
            width="320"
            trigger="hover">
              <div class="qr-hover-wrap">
                <vue-qr
                  :text="scope.row.visualCode || ''"
                  :size="200"
                  :margin="0"
                  :dotScale="1"
                ></vue-qr>
                <p class="qr-code-text">{{ scope.row.visualCode }}</p>
              </div>
              <vue-qr v-if="scope.row.visualCode" slot="reference" :text="scope.row.visualCode||''" :size="50" :margin="0" :dotScale="0.75"></vue-qr>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column 
      v-if="!isMuilUnitUser"
      label="操作"
      width="100">
        <template slot-scope="scope">
            <el-button @click="addPoint(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            <span class="dividing-line">|</span>
            <el-button @click="delPoint(scope.$index, scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal">
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="巡检点位维护"
      width="600px"
      top='10vh'
      v-if="dialogFalg"
      :visible.sync="dialogFalg"
      @close="closeDialog"
      v-dialogDrag>
      <edit-form :editInfo="editInfo" :closeDialog="closeDialog" ></edit-form>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/utils/util'
import { getOrgList} from '@/api/org'
import { getUsers} from '@/api/api'
import * as Dao from '@/api/inspect'
import editForm from './Dialog/InspectPointForm'

export default {
  name: 'InspectPoint',
  props:['param'],
  components: { 
    editForm 
  },
  data () {
    return {
      freashStaticFlag:0,
      formInline: {
        name: '',
        result:'-1',
        orgIds:this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
        time:'',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      buildList: [],
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [],//表格数据
      detailTableData: [],//详情表格数据
      staticObj:{},//头部各状态个数统计
      orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "全部业主单位"}],
      accountOptions: [{accountName: '',name: "用户名称"}],
      loading: false,
      dialogFalg: false,
    }
  },
  created:function() {
     this.getData(1)
     //绑定下拉框
     if(this.isMuilUnitUser)
       getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
       })
  },
  methods: {
    sizeChange(val) {//页码切换
      this.formInline.currentPageIndex = 1;
      this.formInline.currentPageSize = val;
      this.getList() 
    },
    pageChange(val) {//翻页
      this.formInline.currentPageIndex = val;
      this.getList() 
    },
    getData(_pageIndex){
      this.getStatis() 
      this.getList(_pageIndex) 
    },
    getList(_pageIndex) {//获取列表
      if(_pageIndex){
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading =true;
      Dao.getInspectPointNewList({
        queryType : 1,
        pageIndex: this.formInline.currentPageIndex -1,
        pageSize: this.formInline.currentPageSize,
        orgIds: this.formInline.orgIds,
        name: this.formInline.name.trim(),
        visualCodeStatus:0
      }).then((result) => {
        this.formInline.currentPageTotal = result.total;
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    getStatis() {//头部统计
      //this.staticObj = {}
      Dao.getInspectPointNewCountOrg({
        orgIds: this.formInline.orgIds,
        pointName: this.formInline.name.trim()
      }).then((result) => {
          $.extend(this.staticObj,result.data) 
          this.freashStaticFlag++
      }) 
    },
    addPoint(index, row) {
      this.dialogFalg = true
      this.editInfo = row||{}
    },
    closeDialog(refresh) {
      this.dialogFalg = false
      if(refresh) {
        this.getData(this.editInfo.id?'':1)
      }
    },
    delPoint(index, row) {
      let that = this
      this.$confirm("删除该点位类别可能会影响现有巡检流程及巡检记录，确定删除？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        roundButton: true
      }).then(() => {
        Dao.delInspectPointNewById({id: row.id}).then(res => {
          if( res.status === 200) {
            if( res.data === 200011){
              this.$message({
                message: '该点位已被路线关联，不能删除！',
                type: 'warning'
              });
            }else{
              that.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.getData(1)
            }
          }else{
            that.$message.error(res.info);
          }
        })
      }).catch(() => {

      })
    },
  },
}
</script>
<style lang="scss">
.qr-hover-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .qr-code-text {
    margin-top: 10px;
  }
}
</style>
